<template>
  <div class="basicInfo">
    <div class="content">
			<div class="area">
						<div class="public">
							<ul>
								<li>
									<dl>
										<dt>产品名称</dt>
										<dd><input name="" type="text" v-model="basicData.appName"/></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>公司名称</dt>
										<dd><input name="" type="text" v-model="basicData.companyName"/></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>AppKey</dt>
										<dd><input name="" type="text" readonly v-model="basicData.appKey"/></dd>
									</dl>
								</li>
                <li>
									<dl>
										<dt>appSecret</dt>
										<dd><input name="" type="text" readonly v-model="basicData.appSecret"/></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>联系人</dt>
										<dd><input name="" type="text" v-model="basicData.managerName"/></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>注册邮箱</dt>
										<dd><input name="" type="text" readonly v-model="basicData.loginName"/></dd>
									</dl>
								</li>	
								<li>
									<dl>
										<dt>手机号</dt>
										<dd><input name="" type="text" maxlength="11" readonly v-model="basicData.mobile"/></dd>
									</dl>
									<a href="javascript:;" @click="modification" class="btn_send_">修改号码</a>
								</li>																																														
							</ul>
							<a href="javascript:;" @click="update" class="btn_org_">保存设置</a>
						</div>
					</div>
		</div>    
    <div class="shadow" v-if="isShadow"></div>
    <div class="shadowBox" v-if="isShadow">
      <div v-if="isType==1">
           <p class="title">
            原手机验证
            <a href="javascript:;" style="color:#000" @click="close" class="icon iconfont icon-guanbi"></a>
          </p>
          <div class="content">手机验证码将发送至<span style="color:#fa8b00">{{basicData.mobile}}</span></div>
          <div class="inputBox">
            <el-input style="width:60%;float:left;margin-left:13px" v-model="smsCode" placeholder="请输入短信验证码"></el-input>
            <el-button plain style="background:rgb(250, 139, 0);color:#FFF" @click="sendCode(basicData.mobile)" v-if="!isSmsCode">获取验证码</el-button>
            <el-button plain v-if="isSmsCode">{{countDown}}秒后重发</el-button>
          </div>
          <div class="btn">
            <el-button style="background:#fa8b00;width:95%;color:#fff" @click="verification(basicData.mobile)">验证</el-button>
          </div>
      </div>
      <div v-if="isType==2">
          <p class="title">
            新手机验证
            <a href="javascript:;" style="color:#000" @click="close" class="icon iconfont icon-guanbi"></a>
          </p>

          <div class="content"><el-input style="width:115%;position:relative;left:-25px;" v-model="newCode" placeholder="请输入新手机号"></el-input></div>

          <div class="inputBox">
            <el-input style="width:60%;float:left;margin-left:13px" v-model="smsCode" placeholder="请输入短信验证码"></el-input>
            <el-button plain style="background:rgb(250, 139, 0);color:#FFF" @click="sendCode(newCode)" v-if="!isSmsCode">获取验证码</el-button>
            <el-button plain v-if="isSmsCode">{{countDown}}秒后重发</el-button>
          </div>
          <div class="btn">
            <el-button style="background:#fa8b00;width:95%;color:#fff" @click="verification_xin(newCode)">验证</el-button>
          </div>
      </div>

       <div v-if="isType==3">
          <p class="title">
            温馨提示
            <a href="javascript:;" style="color:#000" @click="close" class="icon iconfont icon-guanbi"></a>
          </p>
          <div class="right">
          </div>
          <p style="margin:10px auto">手机号码修改成功</p>
          <small style="color:#999;">你的号码是：<span style="color:#fa8b00;">{{newCode}}</span></small>
      </div>

    </div>
  </div>
</template>
<script>
import commonJs from "@/common/js/common";
export default {
  name: "basicInfo",
  data() {
    return {
      basicData: {},
      isShadow: false,
      smsCode: "",
      isSmsCode: false,
      countDown: 60,
      timer: null,
      isType: 1,
      newCode: ""
    };
  },
  mounted() {
    this.devId = localStorage.getItem("devId");
    this.token = localStorage.getItem("token");
    this.basicinfo();
  },
  methods: {
    //基本信息初始化
    basicinfo() {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/developer/load.do",
        data: `id=${this.devId}&token=${this.token}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.basicData = res.data.data;
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误！请稍后再试！"
          });
        });
    },
    //基本信息保存
    update() {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/developer/update.do",
        data: `devId=${this.devId}&id=${this.basicData.id}&token=${
          this.token
        }&mobile=${this.basicData.mobile}&appName=${
          this.basicData.appName
        }&companyName=${this.basicData.companyName}&managerName=${
          this.basicData.managerName
        }`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.basicinfo();
            this.$message({
              type: "success",
              message: res.data.message
            });
          } else
            this.$message({
              type: "warning",
              message: res.data.message
            });
        })
        .catch(err => {
          this.$message({
            type: "warning",
            message: "网络错误！请稍后再试！"
          });
        });
    },
    modification() {
      this.isShadow = true;
      this.isType = 1;
    },
    close() {
      this.isShadow = false;
      this.noteCode = "";
      this.basicinfo();
    },
    //发送验证码
    sendCode(mobile) {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/smscode/verify.do",
        data: `mobile=${mobile}`
      }).then(res => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.message
          });
          this.isSmsCode = true;
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.countDown > 0) {
                this.countDown--;
              } else {
                this.isSmsCode = false;
                this.countDown = 60;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.message
          });
        }
      });
    },

    //原号码验证
    verification(mobile) {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/smscode/confirm.do",
        data: `mobile=${mobile}&smsCode=${this.smsCode}&token=${this.token}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: res.data.message
            });
            this.isType = 2;
            this.isSmsCode = false;
            this.countDown = 60;
            this.smsCode = "";
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误,请稍后再试！"
          });
        });
    },
    verification_xin(mobile) {
      this.countDown = 60;
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/smscode/confirm.do",
        data: `mobile=${mobile}&smsCode=${this.smsCode}&token=${this.token}`
      }).then(res => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.message
          });
          this.isType = 3;
          this.isSmsCode = false;
          this.countDown = 60;
          this.smsCode = "";
          this.basicData.mobile = this.newCode;
          this.update();
        }
      });
    }
  }
};
</script>
<style scoped>
.basicInfo {
  margin-bottom: 20px;
}
.shadow {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
}
.shadowBox {
  width: 400px;
  height: 300px;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 16px;
  padding: 5px;
  box-sizing: border-box;
}
.shadowBox .icon {
  position: relative;
  top: -7px;
  left: 136px;
}
.shadowBox .title {
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-bottom: 1px solid rgb(212, 210, 210);
}
.shadowBox .right {
  width: 88px;
  height: 88px;
  margin: 30px auto;
  background: url("/static/common/images/right.png");
}
.shadowBox .inputBox {
  margin: 30px 0 30px 0;
}
.main .content {
  width: 80%;
  margin: 20px auto;
}
.area {
  border: 1px solid #ebebeb;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}
.public {
  width: 500px;
  margin: 10px auto;
}
.public ul {
}
.public ul li {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  position: relative;
  border: none;
}
.public ul li dl {
  position: relative;
}
.public ul li dl dt {
  position: absolute;
  top: 6px;
  left: 0px;
  width: 74px;
  text-align: right;
}
.public ul li dl dd {
  height: 30px;
  margin-left: 86px;
  border: 1px solid #cccccc;
}
.public ul li dl dd input {
  height: 30px;
  line-height: 30px;
  width: 90%;
  border: none;
  background: none;
  margin-left: 55px;
  outline: none;
}
.public ul li dl dd a:link,
.public ul li dl dd a:visited {
  margin-left: 0px;
  width: 76px;
  height: 76px;
  border: 1px dashed #bbb;
  display: block;
  line-height: 76px;
  text-align: center;
  color: #666;
}
.public a {
  margin-left: 86px;
}
.public a:link.btn_send_,
.public a:visited.btn_send_ {
  position: absolute;
  top: -35px;
  right: -80px;
  margin-left: 0;
  color: #2aa1f2;
  font-size: 14px;
}
.btn_org_ {
  display: inline-block;
  padding: 0px 10px;
  height: 28px;
  line-height: 28px;
  color: #fff;
  text-align: center;
  border: 1px solid #fa8b00;
  background: #fa8b00;
  font-size: 14px;
}
</style>
